.button {
  height: 60px;
  width: 100%;
  padding: 16px;

  font-weight: 500;
  font-size: 18px;

  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;

  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background-color: var(--radon-button);
  color: var(--radon-button-text);
}

.disabled {
  background-color: var(--swm-off-white);
  color: var(--swm-green-light-60);
  border: 1px solid var(--swm-green-light-60);
  animation: none;
}

.disabledLink {
  pointer-events: none;
  cursor: default;
}

.button span {
  transition: color 0.3s;
  font-size: 16px;
  color: var(--swm-green-light-20);
}

.button:hover span {
  color: var(--swm-green-light-80);
}

.buttonSubtitleWrapper {
  display: flex;
  flex-direction: column;
}

a.buttonLink:hover {
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .button,
  .buttonLink {
    width: 100%;
  }
  .button {
    height: auto;
    font-size: 16px;
  }
}

.button p {
  margin: 0 0 2px 0;
}

.button:hover {
  background-color: var(--radon-button-hover);
}

.arrow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  width: 24px;
  height: 24px;
}
